<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Mickey Mouse</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    figure {
      position: fixed;
      top: 45vh;
      right: 0;
    }

    #code {
      position: absolute;
      top: 50px;
      right: 65px;
      border: 5px solid #000;
      width: 35vw;
      height: 80vh;
      padding: 10px;
      font-size: 16px;
      border-radius: 15px 0 15px 15px;
      overflow-y: auto;
    }

    #code::-webkit-scrollbar {
      display: none;
    }

    .control {
      position: absolute;
      width: 65px;
      top: 50px;
      right: 0;
    }

    .control>button {
      background-color: transparent;
      border: 5px solid #000;
      border-left: 0;
      margin-bottom: 20px;
      outline: none;
      width: 100%;
      height: 50px;
      border-radius: 0 15px 15px 0;
    }

    .control>#speed {
      border: 5px solid #000;
      border-left: 0;
      margin-bottom: 20px;
      width: 100%;
      height: 50px;
      line-height: 40px;
      border-radius: 0 15px 15px 0;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="mickey">
    <div class="head">
      <div class="face">
        <div class="front left"></div>
        <div class="front right"></div>
        <div class="cheek left"></div>
        <div class="cheek right"></div>
        <div class="chin"></div>
        <div class="mouth-wrapper">
          <div class="mouth">
            <div class="tong1"></div>
            <div class="tong2"></div>
          </div>
          <div class="lip"></div>
          <div class="line left"></div>
          <div class="line right"></div>
        </div>
        <div class="eyes">
          <div class="eye left">
            <div class="pupil"></div>
            <div class="eyelidTop"></div>
            <div class="eyelidBottom"></div>
          </div>
          <div class="eye right">
            <div class="pupil"></div>
            <div class="eyelidTop"></div>
            <div class="eyelidBottom"></div>
          </div>
        </div>
        <div class="topNose"></div>
        <div class="nose"></div>
      </div>
    </div>
    <div class="ear left"></div>
    <div class="ear right"></div>
  </div>
  <style id="styleCss"></style>
  <pre id="code"></pre>
  <div class="control">
    <button id="speedUp">加速</button>
    <button id="speedDown">减速</button>
    <div id="speed">速度：1</div>
  </div>
  <script src="main.js"></script>
  <figure>
    <audio src="./music.mp3" autoplay="autoplay" controls="controls" loop="loop">
    </audio>
  </figure>
  </audio>
</body>

</html>